<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>婚礼请柬</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    
    <!-- 配置Tailwind CSS -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#D8A8C6', // 浪漫粉色作为主色调
                        secondary: '#F8C3CD', // 浅粉色作为辅助色
                        accent: '#8B4C7D', // 深紫色作为强调色
                        neutral: '#F9F0F2', // 浅米色作为中性色
                    },
                    fontFamily: {
                        serif: ['Playfair Display', 'Georgia', 'serif'],
                        sans: ['Montserrat', 'sans-serif'],
                    },
                    backgroundImage: {
                        'flower-pattern': "url('https://www.transparenttextures.com/patterns/flower-pattern.png')",
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
            }
            .transition-transform-slow {
                transition: transform 0.8s ease-in-out;
            }
        }
    </style>
    
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4 md:p-8">
    <!-- 婚礼请柬卡片 -->
    <div class="invitation-card relative w-full max-w-4xl bg-neutral rounded-xl overflow-hidden card-shadow">
        
        <!-- 顶部装饰 -->
        <div class="bg-primary py-6 px-4 md:px-8 text-center">
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-serif font-bold text-white text-shadow mb-2">
                诚挚邀请
            </h1>
            <div class="flex justify-center items-center gap-4 text-white">
                <i class="fa fa-heart"></i>
                <p class="text-[clamp(1rem,2vw,1.25rem)] font-sans">诚邀您参加我们的婚礼</p>
                <i class="fa fa-heart"></i>
            </div>
        </div>
        
        <!-- 新人信息和照片 -->
        <div class="p-6 md:p-10">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-10">
                <!-- 左侧新人 -->
                <div class="flex flex-col items-center">
                    <div class="photo-container w-full aspect-square">
                        <img src="img/tyd.jpg" alt="新娘照片" class="w-full h-full object-cover">
                    </div>
                    <h2 id="bride-name" class="mt-4 text-xl md:text-2xl font-serif font-bold text-accent">
                        田友达
                    </h2>
                    <p class="text-sm text-gray-600 mt-1">新郎</p>
                </div>
                
                <!-- 中间爱心装饰 -->
                <div class="flex flex-col items-center justify-center">
                    <div class="w-16 h-16 md:w-24 md:h-24 rounded-full bg-primary flex items-center justify-center mb-4">
                        <i class="fa fa-heart text-white text-4xl md:text-5xl animate-pulse"></i>
                    </div>
                    <p class="text-primary font-serif text-2xl md:text-3xl">
                        & 结婚典礼
                    </p>
                    <div id="hearts-container" class="absolute inset-0 pointer-events-none">
                        <!-- 爱心动画将由JS动态生成 -->
                    </div>
                </div>
                
                <!-- 右侧新人 -->
                <div class="flex flex-col items-center">
                    <div class="photo-container w-full aspect-square">
                        <img src="img/hcy.jpg" alt="新郎照片" class="w-full h-full object-cover">
                    </div>
                    <h2 id="groom-name" class="mt-4 text-xl md:text-2xl font-serif font-bold text-accent">
                        贺成雅
                    </h2>
                    <p class="text-sm text-gray-600 mt-1">新娘</p>
                </div>
            </div>
            
            <!-- 婚礼信息 -->
            <div class="date-box rounded-lg p-6 border-2 border-primary/30">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 时间信息 -->
                    <div class="flex items-start gap-4">
                        <div class="bg-primary/20 rounded-full p-3 mt-1">
                            <i class="fa fa-calendar text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-serif text-lg font-semibold text-accent mb-2">婚礼时间</h3>
                            <p id="wedding-date" class="text-gray-700">2025年11月5日 12:00</p>
                            <p class="text-gray-600 text-sm mt-1">农历九月十六 星期三</p>
                        </div>
                    </div>
                    
                    <!-- 地点信息 -->
                    <div class="flex items-start gap-4">
                        <div class="bg-primary/20 rounded-full p-3 mt-1">
                            <i class="fa fa-map-marker text-primary text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-serif text-lg font-semibold text-accent mb-2">婚礼地点</h3>
                            <p class="text-gray-600 text-sm mt-1">山西省汾阳市东赵村</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 新人合照 -->
        <div class="p-6 md:p-10 pt-0">
            <div class="photo-container w-full rounded-lg overflow-hidden">
                <img src="img/hz.jpg" alt="新人婚纱照" class="w-full h-auto object-cover aspect-video">
            </div>
        </div>
        
        <!-- 底部祝福语 -->
        <div class="bg-primary/10 p-6 md:p-10 text-center">
            <p class="font-serif text-xl text-gray-800 italic">
                "爱情，是心灵的相印，是永恒的承诺"
            </p>
            <p class="mt-4 text-gray-700">
                期待您的到来，共同见证我们最幸福的时刻
            </p>
            <div class="mt-8 flex justify-center gap-6">
                <button id="accept-btn" class="px-8 py-3 bg-primary text-white rounded-full font-medium transition-all hover:bg-accent transform hover:scale-105">
                    <i class="fa fa-check mr-2"></i> 接受邀请
                </button>
                <button id="decline-btn" class="px-8 py-3 bg-white text-primary border border-primary rounded-full font-medium transition-all hover:bg-primary/5 transform hover:scale-105">
                    <i class="fa fa-times mr-2"></i> 无法参加
                </button>
            </div>
        </div>
        
        <!-- 版权信息 -->
        <div class="bg-gray-100 py-4 text-center text-gray-500 text-sm">
            <p>© 2025 永恒的爱 | 用心创造美好回忆</p>
        </div>
    </div>
    
    <!-- 音频元素 - 放置在交互弹窗之前，确保优先加载 -->
    <audio id="background-music" loop autoplay preload="auto">
        <source src="music/水边的阿狄丽娜.mp3" type="audio/mpeg">
        您的浏览器不支持音频元素。
    </audio>
    
    <!-- 音乐控制按钮 -->
    <div class="music-controls">
        <div class="volume-control" id="volume-slider-container">
            <input type="range" id="volume-slider" min="0" max="1" step="0.05" value="0.5">
        </div>
        <button id="music-toggle" class="music-btn" title="音乐控制">
            <i class="fa fa-music"></i>
        </button>
    </div>
    
    <!-- 交互弹窗 -->
    <div id="response-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 transform transition-all">
            <h3 id="modal-title" class="text-2xl font-serif font-bold text-accent text-center mb-4">
                感谢您的回复
            </h3>
            <p id="modal-message" class="text-gray-700 text-center mb-8">
                我们期待在婚礼上见到您！
            </p>
            <div class="flex justify-center">
                <button id="close-modal" class="px-8 py-3 bg-primary text-white rounded-full font-medium transition-all hover:bg-accent">
                    确定
                </button>
            </div>
        </div>
    </div>
    
    <!-- 引入外部JavaScript -->
    <script src="js/script.js"></script>

     <script>
            const speed = 2; // 滚动速度
            let scrollTimer;
            let isScrolling = true; // 滚动状态开关（默认开启）
    
            // 开始自动滚动
            function startScroll() {
                if (scrollTimer) clearInterval(scrollTimer); // 避免重复创建定时器
                scrollTimer = setInterval(() => {
                    window.scrollBy(0, speed);
                    // 滚动到顶部时重置（可选）
                    if (window.scrollY + window.innerHeight >= document.body.scrollHeight) {
                        window.scrollTo(0, 0);
                    }
                }, 30);
                isScrolling = true;
            }
    
            // 暂停滚动
            function pauseScroll() {
                clearInterval(scrollTimer);
                scrollTimer = null;
                isScrolling = false;
            }
    
            // 点击页面时切换滚动状态
            document.body.addEventListener('click', () => {
                if (isScrolling) {
                    pauseScroll(); // 当前正在滚动 → 暂停
                } else {
                    startScroll(); // 当前已暂停 → 继续
                }
            });
    
            // 页面加载后自动开始滚动
            //window.onload = startScroll;
			document.body.click();
        </script>
    </body>
</html>